<template>
    <el-row class="main">
        <el-col class="padd20 posa">
            <div class="container">
                <el-container>
                    <el-header>
                        <div class="header">
                            <div class="left">
                                <el-badge :value="$store.state.todocnt" :max="99" class="item">
                                    待审核
                                </el-badge>
                            </div>
                            <div class="right" @click="allpass" v-if="$store.state.todocnt>0">
                                全部通过
                            </div>
                        </div>
                    </el-header>
                    <el-main style="padding: 0 20px;">
                        <div class="main" v-for="(item,index) in page.list" :key="item.id">
                            <div class="main-float">
                                <div class="imgstyle">
                                    <img src="../../../static/img/shenhetu.png">
                                </div>
                                <div class="main-right">
                                    <i class="dian" v-if="item.isfinished==0"></i>
                                    <div class="main-top" v-if="item.type==1">
                                        注册申请
                                        <span class="date">
                                            {{item.createtime | dateFormat}}
                                        </span>
                                    </div>
                                    <div class="main-center">
                                        <div id="">
                                            {{item.content}}
                                        </div>
                                    </div>
                                </div>
                                <div class="xuan" v-if="item.isfinished==0">
                                    <el-button type="primary" @click="passtodo(item.id)">审核通过</el-button>
                                    <el-button type="warning" @click="rej(item.id)">驳回</el-button>
                                </div>

                                <div class="xuan" v-if="item.result==1 && item.isfinished==1">
                                    <img src="../../../static/img/ysh.png" class="result" />
                                    <div class="ren">
                                        <div class="respan">
                                            <span>审核人:{{item.approvername}}</span>
                                            <span>审核时间:{{item.approvetime | dateFormat}}</span>
                                        </div>
                                    </div>

                                </div>

                                <div class="xuan" v-if="item.result==2 && item.isfinished==1">
                                    <img src="../../../static/img/ybh.png" class="result" />
                                    <div class="ren">
                                        <div class="bospan">
                                            <span>审核人:{{item.approvername}}</span>
                                            <span>审核时间:{{item.approvetime | dateFormat}}</span>
                                            <el-popover placement="left-start" title="驳回原因" width="500" trigger="hover"
                                                :content="item.reason">
                                                <span slot="reference">查看原因</span>
                                            </el-popover>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <el-pagination @current-change="getdata" background layout="prev, pager, next"
                            :total="page.total" :page-size="page.pageSize" :current-page="page.pageNum"
                            hide-on-single-page></el-pagination>

                        <el-col class="box box-pack-center">
                            <el-empty description="暂无记录" :image-size="100" v-if="page.list.length==0"></el-empty>
                        </el-col>
                    </el-main>
                </el-container>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    import moment from "moment";
    export default {
        data() {
            return {
                badge: '',
                show: '',
                page: {
                    list: []
                },
                info: this.$store.state.loginInfo,
                user: this.$store.state.loginInfo.user,

            }
        },
        mounted() {
            this.getdata();
        },
        filters: {
            dateFormat: function(e1) {
                return moment(e1).format("YYYY-MM-DD HH:mm:ss");
            }
        },
        methods: {

            //获取 待办数、未读消息数
            gettodocnt() {
                this.$ajax.post('/ytodo/gettodocnt', {
                    userid: this.user.id
                }).then(res => {
                    this.$store.state.todocnt = res.cnt;
                })
            },
            getdata(pageNum) {
                this.$ajax.post('/ytodo/pagelist', {
                    userid: this.user.id,
                    pageNum: pageNum
                }).then(res => {
                    this.page = res.page;
                    this.gettodocnt();
                    console.log(this.page)
                })
            },
            //全部通过
            allpass() {
                this.$ajax.post('/ytodo/allpass', {
                    userid: this.user.id
                }).then(res => {
                    if (res.code == 0) {
                        this.$store.state.todocnt = 0;
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        });
                        this.getdata();
                    }
                })
            },
            //通过
            passtodo(id) {
                this.$confirm('此操作将会提交该信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$ajax.post('/ytodo/passtodo', {
                        id: id,
                        approvor: this.user.name,
                        approvoruserid: this.user.id
                    }).then(res => {
                        if (res.code == 0) {
                            this.$message({
                                type: 'success',
                                message: '提交成功!'
                            });
                            this.getdata();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });

            },
            //驳回
            rej(id) {
                this.$prompt('驳回原因', '提示', {
                    inputValue: '不同意',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^\w|\W|[\u4e00-\u9fa5]{1,100}$/,
                    inputErrorMessage: '限1~100中英文',
                    inputtype: 'text'
                }).then(({
                    value
                }) => {
                    this.$ajax.post('/ytodo/reject', {
                        id: id,
                        reason: value,
                        approvor: this.user.name,
                        approvoruserid: this.user.id
                    }).then(res => {
                        if (res.code == 0) {
                            this.$message({
                                type: 'success',
                                message: '已驳回'
                            });
                            this.getdata();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消驳回'
                    });
                });
            },
            // getstyle(item){
            //     if(item.isActive){
            //         return {'background-color':'#F6FAFF'}
            //     }
            //     return {}
            // },
            //  getisActive(item){
            //      // let currentState = item.isActive;
            //      //         this.page.list.forEach(el=>{
            //      //         el.isActive= false
            //      //     })
            //  },
            openid(id) {
                // console.log(id)
                this.show = id;
            },
            closeid() {
                this.show = !this.show;
            }
        }
    }
</script>

<style scoped lang="scss">
    .ren {
        height: 80px;
        width: 250px;
        margin: 0;
        position: relative;

        >.respan {
            text-align: left;
            height: 40px;
            position: absolute;
            bottom: 0;

            >span {
                font-size: 12px;
                display: block;
                height: 20px;
                line-height: 20px;
            }
        }

        >.bospan {
            text-align: left;
            height: 60px;
            position: absolute;
            bottom: 0;

            >span {
                font-size: 12px;
                display: block;
                height: 20px;
                line-height: 20px;
            }

            >span:last-child {
                cursor: pointer;
                color: #626BF1;
            }
        }

    }

    .xuan {
        display: flex;
        // justify-content: space-between;
        line-height: 80px;
        width: 400px;
        min-height: 80px;
        height: auto !important;
        height: 80px;
        overflow: hidden !important;
        overflow: visible;
        align-items: center;

    }

    /deep/ .el-badge__content.is-fixed {
        top: 30px;
        right: 5px;

    }

    .item {
        width: 80px;

    }

    .contain[data-v-fbe2b96c] .el-header {
        border-bottom: 0 !important;
        background-color: #fffff;
    }

    .header {
        // width: 1200px;
        height: 59px;
        line-height: 59px;
        background: #F6FAFF;
        border: 1px solid #E4ECF4;
        border-radius: 12px 12px 0px 0px;
        display: flex;
        justify-content: space-between;

        >.left {
            width: 102px;
            height: 16px;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #626BF1;
        }

        >.right {
            width: 90px;
            height: 16px;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            cursor: pointer;

            &:hover {
                color: #626BF1;
            }
        }
    }

    .dian {
        position: absolute;
        top: 9px;
        left: 4px;
        display: block;
        width: 6px;
        height: 6px;
        background: linear-gradient(-3deg, #FA5151, #FC7088);
        border-radius: 50%;
    }

    .main-float {
        //随着数据量的增加而使div高度变化
        margin-bottom: 6px;
        min-height: 90px;
        height: auto !important;
        height: 90px;
        overflow: hidden !important;
        overflow: visible;
        // width:1200px;
        display: flex;
        border: 1px solid #E4ECF4;

        >.imgstyle {
            margin-top: 18px;
            margin-left: 18px;
            width: 47px;
            height: 37px;

            >img {
                width: 100%;
                height: 100%;
            }
        }

        >.main-right {
            padding-bottom: 25px;
            width: 1163px;
            margin-top: 18px;
            position: relative;
            overflow: hidden;

            >.main-top {
                text-align: left;
                padding-left: 12px;
                margin-left: 10px;
                width: 330px;
                height: 16px;
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #2F3142;
            }

            >.main-center {
                text-align: left;
                padding: 0 20px 0 40px;
                margin-top: 10px;
                font-size: 14px;
                font-family: Source Han Sans CN;
                font-weight: 300;
                color: #5F6572;

                >.main-center-word {}
            }

            >.kan {
                margin-top: 10px;
                float: left;
                width: 80px;
                height: 20px;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 300;
                color: #626BF1;
                cursor: pointer;
            }

            >.main-bot {
                float: left;
                margin-top: 10px;
                display: block;
                width: 128px;
                height: 15px;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 300;
                color: #464951;
                margin-left: 12px;

            }
        }
    }

    .main {
        position: relative;
        height: 100%;
    }

    .posa {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        overflow-y: auto;
        background-color: #fff;
    }

    .date {
        font-size: 12px;
        color: #383636;
    }

    .result {
        display: block;

    }
</style>
